<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            padding: 50px;
            background: #f5f5f5;
        }
        #box2 {
            padding:50px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="app">
        <div id="box1">
            <p class="p1">p1</p><p class="p2">p2</p>
            <p class="p3">p3</p>
            123
        </div>

        <div id="box2">
            <div class="p4">p4</div>
        </div>
        

    </div>
</body>
<script>
    let el = document.getElementsByClassName('p1')[0]
    let i = 1
    while(el) {
        console.log(i, el.nodeName)
        el = el.nextSibling
        i++
    }
    let elBox1 = document.getElementById('box1')

    console.log('firstChild==', elBox1.firstChild)
    elBox1.insertBefore(document.getElementsByClassName('p4')[0], elBox1.firstChild)

    // setTimeout(() => {
    //     const parent = document.getElementById('box1')
    //     const anchor = document.getElementsByClassName('p2')[0]
    //     parent.insertBefore(document.getElementsByClassName('p4')[0], null)
    // }, 2000)

    // 该demo用来理解nextSibling和insertBefore
</script>
</html>